{extend name="platform/base" /}
{block name="resources"/}
<style  type="text/css">
.error{
	font-size: 12px;
    line-height: 16px;
    color: red;
    margin-top: 10px;
	display:none;
}

</style>
 {/block}
{block name="main"}
<section class="panel panel-default">
	<header class="panel-heading font-bold"> 添加广告位 </header>
	<div class="panel-body">
		<form class="form-horizontal">
			<div class="form-group">
				<label class="col-sm-2 control-label"><span style="color:red;margin-right:10px;">*</span>名称</label>
				<div class="col-md-4">
					<input type="text" class="form-control" id="ap_name" value="">
				</div>
					<p class="error">请输入广告位名称</p>
			</div>
            <div class="line line-dashed line-lg pull-in"></div>
			<div class="form-group">
				<label class="col-sm-2 control-label">简介</label>
				<div class="col-md-4">
					<div id="editor" class="form-control" style="overflow:scroll;height:150px;max-height:150px"></div>
				</div>
			</div>
            <div class="line line-dashed line-lg pull-in"></div>
			<div class="form-group">
				<label class="col-sm-2 control-label">类别</label>
				<div class="col-md-4">
					<select id="ap_class" name="account" class="form-control m-b">
						<option value="0">图片</option>
<!-- 						<option value="1">文字</option> -->
<!-- 						<option value="2">falsh</option> -->
					</select>
				</div>
			</div>
			<div class="line line-dashed line-lg pull-in"></div>
			<div class="form-group">
                                            <label class="col-sm-2 control-label">是否启用</label>
                                            <div class="col-sm-4">
                                                <label class="switch">
                                                    <input id="is_use" type="checkbox" >
                                                    <span></span> </label>
                                            </div>
                                        </div>
			<div class="line line-dashed line-lg pull-in"></div>
			<div class="form-group">
                                            <label class="col-sm-2 control-label">所在位置类型</label>
                                            <div class="col-sm-10">
                                                <div class="radio col-sm-2">
                                                    <label>
                                                        <input type="radio" name="type" id="type1" value="1" checked> pc端 </label>
                                                </div>
                                                <div class="radio col-sm-2">
                                                    <label>
                                                        <input type="radio" name="type" id="type2" value="2" > 手机端 </label>
                                                </div>
                                            </div>
                                        </div>
            <div class="line line-dashed line-lg pull-in"></div>
			<div class="form-group">
                                            <label class="col-sm-2 control-label"><span style="color:red;margin-right:10px;">*</span>展示方式</label>
                                            <div class="col-sm-10">
                                                <div class="radio">
                                                    <label>
                                                        <input type="radio" name="ap_display" id="ap_display0" value="0" > 可以发布多条并幻灯展示 </label>
                                                </div>
                                                <div class="radio">
                                                    <label>
                                                        <input type="radio" name="ap_display" id="ap_display1" value="1" > 可以发布多条广告并随机展示 </label>
                                                </div>
                                                <div class="radio">
                                                    <label>
                                                        <input type="radio" name="ap_display" id="ap_display2" value="2" > 只允许发布并展示一条广告 </label>
                                                <p class="error">请选择展示方式</p>
                                                </div>
                                                  
                                            </div>
                                        </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
				<label class="col-sm-2 control-label"><span style="color:red;margin-right:10px;">*</span>宽度</label>
				<div class="col-md-4">
					<input type="text" class="form-control" id="ap_width" value="">
				</div>
					<p class="error">请输入广告位宽度只能是数字</p>
			</div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
				<label class="col-sm-2 control-label"><span style="color:red;margin-right:10px;">*</span>高度</label>
				<div class="col-md-4">
					<input type="text" class="form-control" id="ap_height" value="">
				</div>
				<p class="error">请输入广告位高度只能是数字</p>
			</div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
				<label class="col-sm-2 control-label"><span style="color:red;margin-right:10px;">*</span>默认图片</label>
				<div class="col-md-4 pic">
					<p><img id="imgLogo" src="" class="imglogo"/></p>
                                            	<a href="javascript:void(0);" style="display:block;position:relative;z-index:1;">
                                            		<span style="width: 97px;height: 34px;position: absolute;left: 0;top: 0;z-index: 2;cursor: pointer;"> 
                                            		<input hidefocus="true" size="1" class="input-file" name="file_upload"
														id="uploadImg" nc_type="change_store_label" type="file" style="width: 97px;height: 34px;padding: 0;margin: 0;border: none 0;opacity: 0;filter: alpha(opacity = 0);cursor: pointer;"
														onchange="imgUpload(this);"> 
														<input type="hidden" id="Logo" value="" />
													</span>
													<a class="btn btn-default"><i class="fa fa-cloud-upload text"></i><span class="text">上传图片</span></a>
												</a>
														<p class="error">请上传一张图片作为默认图片</p>
				</div>
			</div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
				<label class="col-sm-2 control-label">默认图片背景色</label>
				<div class="col-md-2">
					<!-- <input id="colorpicker"/> -->
 					<input type="color" class="form-control" id="colorpicker" value=""> 
				</div>
		
			</div>
            <div class="line line-dashed line-lg pull-in"></div>
			<div class="form-group">
				<div class="col-sm-4 col-sm-offset-2">
					<a href="javascript:void(0);" onclick="addPlatformAdvPositionAjax()" class="btn btn-primary">保存</a>
				</div>
			</div>
		</form>
	</div>
</section>
<script src="PLATFORM_JS/ajaxFileUpload.js" type="text/javascript"></script>
<script src="__STATIC__/js/file_upload.js" type="text/javascript"></script>
<script>	
	/**
	*添加广告位
	*/
	function addPlatformAdvPositionAjax() {
		var ap_name = $("#ap_name").val();
		var ap_intro = $("#editor").html();
		var ap_class = $("#ap_class").val();
		if($("#is_use").prop("checked")){
			var is_use = 1;
		}else{
			var is_use = 0;
		}
		var ap_display = $("input[type='radio'][name='ap_display']:checked").val();
		var ap_width = $("#ap_width").val();
		var ap_height = $("#ap_height").val();
		var default_content = $("#Logo").val();
		var ap_background_color = $("#colorpicker").val();
		var type = $("input[type='radio'][name='type']:checked").val();
// 		verify(ad_image, link_url);
	if(verify(ap_name,ap_display,ap_width,ap_height)){
		$.ajax({
			type : "post",
			url : "{:__URL('PLATFORM_MAIN/config/addplatformadvposition')}",
			data : {
				'ap_name' : ap_name,
				'ap_intro' : ap_intro,
				'ap_class' : ap_class,
				'is_use' : is_use,
				'ap_display' : ap_display,
				'ap_width' : ap_width,
				'ap_height' : ap_height,
				'default_content' : default_content,
				'ap_background_color' : ap_background_color,
				'type' : type,
			},
			async : true,
			success : function(data) {
				if (data["code"] > 0) {
					showMessage('success', "添加成功","{:__URL('PLATFORM_MAIN/config/platformadvpositionlist')}");
				}else{
					showMessage('error', "添加失败");
				}
			}
		});
	 }
  }
	/**
	*模块输入信息验证
	*/
	function verify(ap_name,ap_display,ap_width,ap_height){
		var reg =  /^\d+$/;
		if(ap_name.length == 0){
			$("#ap_name").parent().next(".error").show();
			$("#ap_name").focus();
			return false;
		}else{
			$(".error").hide();
		}
		if(ap_display == undefined){
			$("#ap_display2").parent().next(".error").show();
			return false;
		}else{
			$(".error").hide();
		}
/* 		if(ap_width.length == 0){
			$("#ap_width").parent().next(".error").show();
			$("#ap_width").focus();
			return false;
		}else{
			$(".error").hide();
		}
		if(ap_height.length == 0){
			$("#ap_height").parent().next(".error").show();
			$("#ap_height").focus();
			return false;
		}else{
			$(".error").hide();
		} */
        if(!reg.test(ap_width)){
			$("#ap_width").parent().next(".error").show();
			$("#ap_width").focus();
			return false;
		}else{
			$(".error").hide();
		}
		
		if(!reg.test(ap_height)){
			$("#ap_height").parent().next(".error").show();
			$("#ap_height").focus();
			return false;
		}else{
			$(".error").hide();
		}

		if($("#Logo").val().length ==0){
			$(".pic .error").show();
			return false;
		}else{
			$(".error").hide();
		}
		return true;;
	}
	/**
	 *图片上传
	 */
	 /*	function imgUpload(event) {
		var fileid = $(event).attr("id");   var str = $(event).next().attr("id");
		fileCommonUpload("UPLOAD_URL", fileid,"__UPLOAD__",str);
	}*/
	function imgUpload(event) {
		var fileid = $(event).attr("id");
		var data = { 'file_path' : UPLOADADV };
		uploadFile(fileid,data,function(res){
			if(res.code){
				$("#imgLogo").attr("src","__UPLOAD__/"+res.data);
				$("#Logo").val(res.data);
				showTip(res.message,"success");
			}else{
				showTip(res.message,"error");
			}
		});
	}
/*  	$(function (){
		$("#colorpicker").spectrum({
		    color: "#f00",
		    showInput: true,
		    preferredFormat: true,
		    showPalette: true,
		});	
	});  */
</script>
{/block}